<template>
  <div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">组件类型</div>
      <div class="w-3/4">
        <a-input type="text" disabled v-model:value="current.component" />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">字段标识</div>
      <div class="w-3/4">
        <a-input
          type="text"
          placeholder="用于$('')查询"
          v-model:value.trim="current.selector"
        />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">功能描述</div>
      <div class="w-3/4">
        <a-input type="text" v-model:value="current.describe" />
      </div>
    </div>

    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">是否分页</div>
      <div class="w-3/4">
        <a-checkbox
          v-model:checked="current.componentProps.pagination"
          size="large"
        />
      </div>
    </div>

    <div class="flex items-center p-10">
      <div class="w-1/4 text-14 font-bold">列配置</div>
    </div>

    <draggable
      class="drawing-board"
      v-model="current.componentProps.columns"
      v-bind="{ group: 'column', animation: 200 }"
      tag="div"
      item-key="key"
      :component-data="{ name: 'fade' }"
      @end="onEnd"
    >
      <template #item="{ element: el, index }">
        <div class="flex items-center px-10 p-[5px] mb-[5px] border-b border-gray-200">
          <div class="w-1/4 text-16">{{ el.key }}</div>
          <div class="w-2/4">
            {{ el.title }}
          </div>
          <div class="w-1/4">
            <a-button  type="link">编辑</a-button>
          </div>
        </div>
      </template>
    </draggable>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import type { Component } from "@/components/low-code/core/component";

export default defineComponent({
  name: "tableSetting",
  props: ["current"],
  setup(props) {
    const component = props.current as Component;
    let lowCode = component.getLowCodeInstance();

    const onEnd = () => {
      lowCode.updateMetaRefresh();
    };
    return { lowCode, component, onEnd };
  },
});
</script>

<style scoped></style>
